<template>
  <div>
<div class="movie-admin-header">
  <div class="search-container">
    <el-input placeholder="输入查询内容" v-model="content" @keyup.enter.native="searchMovie">
      <el-button slot="append" icon="el-icon-search" @click="searchMovie"></el-button>
    </el-input>
</div>
</div>
    <movie-admin-tag v-for="(subject,idx) in movieList" :subject="subject" :key="idx"/>
    <div class="block" v-show="movieList.length > 10">
      <el-pagination
        :current-page="currentPage"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="cpage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import movieAdminTag from './common/mAdminTag'
export default {
  data () {
    return {
      content: '',
      dialogVisible: false,
      currentPage: 1,
      rules: {
        title: [
          {require: true, message: '电影名不能为空', trigger: 'change'}
        ],
        director: [
          {require: true, message: '导演不能为空', trigger: 'blur'}
        ],
        stars: [
          {require: true, message: '演员不能为空', trigger: 'blur'}
        ],
        introduce: [
          {require: true, message: '介绍不能为空', trigger: 'blur'}
        ],
        year: [
          {type: 'number'}
        ]
      }
    }
  },
  components: {
    movieAdminTag
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    searchMovie () {
      if (this.content === '') {
        this.currentPage = 1
        this.$store.commit('CPAGE', {cpage: 1})
        this.$store.dispatch('findAllMovies')
      } else {
        this.$store.commit('SEARCH_TEXT', {searchText: this.content})
        this.$store.dispatch('findMovieByName')
      }
    },
    submitAddForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log('validate is ok')
        } else {
          console.log('error submit')
          return false
        }
      })
    }
  },
  computed: {
    movieList () {
      return this.$store.getters.movieList
    },
    cpage: this.$store.getters.cpage
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "../../style/color";
.movie-admin-header{
  width: 950px;
  margin: 0 auto;
  height: 75px;
  .search-container{
    display: inline-block;
    line-height: 75px;
    vertical-align: top;
    width: 500px;
    margin-left: 50px;
    input{
      height: 34px;
    }
  }
  .add-class{
    margin-top: 20px;
    display: inline-block;
  }
}

</style>
